import './index.scss'
import {Button, Form, Input, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {editNearNameStore} from './model'
import {CFormItem} from '@/components/form'

const Editnearname = () => {
  const {updatePageDataSource, pageData, formSubmit} =
    useContext(editNearNameStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Editnearname useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Editnearname useDidShow')
    updatePageDataSource()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Editnearname useDidHide')
  })
  return (
    <View className="container">
      <Form
        onSubmit={e => {
          e.detail.value?.nearName &&
            formSubmit({nearName: e.detail.value.nearName})
        }}
      >
        <CFormItem
          label="昵称"
          style={{
            marginTop: '68rpx'
          }}
        >
          <Input
            className="h-42"
            value={pageData.user?.userNearName}
            name="nearName"
            placeholder="请输入您的昵称，让大家知道是你"
            placeholderClass="text-14 text-xxx_text"
          ></Input>
        </CFormItem>

        <View className="mt-56 px-16">
          <Button className="h-48 leading-48 bg-primary" formType="submit">
            <View className="text-16 text-white">完成</View>
          </Button>
        </View>
      </Form>
    </View>
  )
}
export default observer(Editnearname)
